<template>
	<view class='list acea-row row-between-wrapper'>
		<view class='item' hover-class='none' @click="goDetail(item)">
			<view class='pictrue'>
				<easy-loadimage :image-src="item.image"></easy-loadimage>
			</view>
			<view class='texts'>
				<view class='name'>{{ item.storeName }}</view>
				<!-- <view class='couponActivity'>$500</view> -->
				<view class='money acea-row row-between-wrapper'>
					<view>
						<text class='num'>
							<statistic :value="item.price" :currency="item.currency"/>
						</text>
						<text class="unit" v-show="item.unitName">/{{ item.unitName }}</text>
					</view>
					<view class="sold">{{ (Math.floor(item.sales) + Math.floor(item.ficti)) || 0 }}
						{{ $t(`message.tips.sold`) }}</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
import statistic from '@/components/statistic'
import { mapState } from 'pinia'
import { useAppStore } from '@/stores/app'
import { goShopDetail } from '@/libs/order.js'
export default {
	components: {statistic},
	props: {
		item: {
			type: Object,
			require: true
		},
		type: {
			type: Number,
			default: 0
		},
		isStore: {
			type: [String, Number],
			default: '1'
		},
		isLogin: {
			type: Boolean,
			require: false
		}
	},
	data() {
		return {
		}
	},
	computed: {
		...mapState(useAppStore, ['currency'])
	},
	methods: {
		// 去详情页
		goDetail(item) {
			goShopDetail(item);
		},
		goShop(id) {
			this.$emit('goShop', id);
		},
		authOpen() {
			this.$emit('authOpen');
		},
		followToggle(item) {
			this.$emit('followToggle', item);
		},
		addCart(item) {
			this.$openCart()
		}
	}
}

</script>
<style lang="scss" scoped>
.sold {
	font-size: 26rpx;
	color: #888888;
}

.list .item .pictrue,
.easy-loadimage,
image,
uni-image {
	position: relative;
	width: 100%;
	height: 274rpx;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;

	:v-deep {

		image,
		.easy-loadimage,
		uni-image {
			height: 274rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
}

.list {
	.item {
		width: 100%;

		.pictrue image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}
	}

	.texts {
		padding: 16rpx 24rpx 24rpx 24rpx;
		font-size: 30rpx;
		color: #222;

		.name {
			font-size: 26rpx;
			line-height: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 8rpx;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.money {
			.num {
				font-size: 32rpx;
				font-weight: 600;
				@include price_color(theme);
			}

			.unit {
				font-size: 22rpx;
				color: $jcg-font-color-assist;
			}

			.y-money {
				font-size: 26rpx;
				color: $jcg-font-color-assist;
				text-decoration: line-through;
				margin-left: 14rpx;
			}

			.addCart {
				width: 44rpx;
				height: 44rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				@include main_bg_color(theme);

				.iconfont {
					color: #fff;
					font-size: 20rpx
				}
			}
		}
	}
}</style>
